<template>
  <Transition name="fade"
              @before-leave="onClose"
              @after-leave="$emit('destroy')"
  >
    <div ref="messageRef" class="base-message"
         v-show="visible"
        :style="customStyle"
    >
      <i class="el-icon el-message__icon el-message-icon--success">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
          <path fill="currentColor"
                d="M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896m-55.808 536.384-99.52-99.584a38.4 38.4 0 1 0-54.336 54.336l126.72 126.72a38.272 38.272 0 0 0 54.336 0l262.4-262.464a38.4 38.4 0 1 0-54.272-54.336z"></path>
        </svg>
      </i>
      <p class="text">{{ message }}</p>
    </div>
  </Transition>
</template>
<script setup lang="ts">
import {computed, onMounted, ref, useTemplateRef} from "vue";
import {messageEmits, messageProps} from "./messageProps.js";
import {useResizeObserver, useTimeoutFn} from "@vueuse/core";
import {getLastOffset, getOffsetOrSpace} from "@/components/Message/instance.js";

const messageRef = useTemplateRef<HTMLDivElement>("messageRef")
defineOptions({
  name: 'MessageContext',
})

const props = defineProps(messageProps)
defineEmits(messageEmits)

// 元素是否可以看到
const visible = ref(false)
// 元素高度
const height = ref(0)

let stopTimer: (() => void) | undefined = undefined

const startTimer = () => {
  if(props.duration === 0) return
  ;({stop: stopTimer} = useTimeoutFn(() => {
    close()
  }, props.duration))
}
const close  = () => {
  visible.value = false
}

onMounted(() => {
  startTimer()
  // nextZIndex()
  visible.value = true
})
// 获取上个元素下边的位置
const lastOffset = computed(() => getLastOffset(props.id))
const offset = computed(() => getOffsetOrSpace(props.id, props.offset) + lastOffset.value)
const bottom = computed((): number => height.value + offset.value)

// 自定义样式
const customStyle = computed(() => ({
  top: `${offset.value}px`,
}))


useResizeObserver(messageRef, () => {
  height.value = messageRef.value!.getBoundingClientRect().height
})

defineExpose({
  visible,
  bottom,
  close
})
</script>

<style scoped lang="scss">
.base-message {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  padding: 6px;
  border-radius: 4px;
  z-index: 999;
  background-color: #fff;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); // 柔和的阴影
  transition: all 0.4s ease;
  .iconfont {
    font-size: 20px;
  }

  .text {
    padding: 0 15px;
  }
}

/* 动画进入开始时状态 */
//.down-enter {
//  opacity: 0;
//  transform: translate(-50%, -100%);
//}
//
//.down-enter-to {
//  transform: translate(-50%, 0%);
//}

/* 动画进入过程动画效果 */
.fade-enter-active {
  transition: all 0.4s ease;
}

/* 动画离开开始时状态 */
.fade-leave {
  transform: translateY(0%);
}

/* 动画结束时动画 */
.fade-leave-to {
  opacity: 0;
  transform: translate(-50%, -100%);
}

/* 动画离开过程动画效果 */
.fade-leave-active {
  transition: all 0.4s ease;
}

.pr-icon {
  display: block;

}
</style>

